<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<script>
    var cas = document.querySelector("canvas");
    var ctx = cas.getContext("2d");

    //画图片
    //思路：每100毫秒在同宽高同地方画原图x轴不同位置的图片；
    //思路：按下键，在同宽高同地方画原图y轴不同位置的图片；
    //思路：按下上下左右键，在同宽高不同地方画原图x,y轴不同位置的图片；
    var img = new Image();
    img.src = "img/士兵.png";
    var casy=0;
    var casx=0;
    var numy=0

    img.onload = function () {

        //因为原图开始坐标是0，所以要设置num=-1
        var numx = -1;
        setInterval(function () {
            //清除图像
            ctx.clearRect(0,0,600,600);
            numx++;
            if (numx == 4) {
                numx = 0;
            }
//                        图片对象   原图的x坐标         原图的y坐标
            ctx.drawImage(img,  img.width / 4*numx,  img.height / 4*numy,  img.width / 4,  img.height / 4,  casx,  casy,  img.width / 4,  img.height / 4)

        }, 100)



    }

    //键盘按下事件
    document.body.onkeydown=function(e){
        var key= e.key;
        //根据不同按键执行不同操作
        switch (key){
            case "w":
                numy=3;
                break;
            case "s":
                numy=0;
                break;
            case "a":
                numy=1;
                break;
            case "d":
                numy=2;
                break;
            case "ArrowUp":
                casy-=5;
                break;
            case "ArrowDown":
                casy+=5;
                break;
            case "ArrowLeft":
                casx-=5;
                break;
            case "ArrowRight":
                casx+=5;
                break;
            default :
                break;
        }
        if(casx>cas.width-img.width/4){
            casx=cas.width-img.width/4;
        }

        if(casy>cas.height-img.height/4){
            casy=cas.height-img.height/4;
        }

        if(casx<0||casy<0){
            casx=0;
            casy=0;
        }

    }




</script>
</body>
</html>